<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>空域综合管理-查看飞行计划</title>
		<link href="css/ele2.3.3.css" rel="stylesheet" type="text/css">
		<link href="css/flyDetail.css" rel="stylesheet" type="text/css">
	</head>

	<body>
		<!-- <div id="load"><loading v-show="showLoading"></loading></div> -->
		<div id="app" v-cloak>
			<header>
				<div class="logo">空域综合管理</div>
			</header>
			<div class="Wraper">
				<div class="mainBody">
					<h2>查看飞行计划</h2>
					<div class="cont">
						<!--工具条-->
						<el-collapse>
							<el-collapse-item title="飞行计划基本信息">
								<div class="collapse-content">
									<div class="baseinfo">
										<p><span>申请编码：</span><span>{{flyPlanBasicInfor.applyCode | nullDefalut}}</span></p>
										<p><span>计划申请名称：</span><span>{{flyPlanBasicInfor.flyPlanName | nullDefalut}}</span></p>
										<p><span>飞行计划编码：</span><span>{{flyPlanBasicInfor.flyPlanCode | nullDefalut}}</span></p>
										<p><span>FSS：</span><span>{{flyPlanBasicInfor.fssId | nullDefalut}}</span></p>
										<p><span>飞行性质：</span><span>{{flyPlanBasicInfor.flyType | nullDefalut}}</span></p>
										<p><span>飞行规则：</span><span>{{flyPlanBasicInfor.flyRule | nullDefalut}}</span></p>
										<p><span>执行日期：</span><span>{{flyPlanBasicInfor.executorDate | nullDefalut}}</span></p>
										<p><span>计划起飞时间：</span><span>{{flyPlanBasicInfor.planFlyDateStr | nullDefalut}}</span></p>
										<p><span>计划落地时间：</span><span>{{flyPlanBasicInfor.planJlDateStr | nullDefalut}}</span></p>
										<p><span>计划架次：</span><span>{{flyPlanBasicInfor.planCount | nullDefalut}}</span></p>
										<p><span>起降点：</span><span>{{flyPlanBasicInfor.landingPoints | nullDefalut}}</span></p>
										<p><span>机长姓名：</span><span>{{flyPlanBasicInfor.planeAptainName | nullDefalut}}</span></p>
										<p><span>机长联系方式：</span><span>{{flyPlanBasicInfor.planeAptainPhone | nullDefalut}}</span></p>
									</div>

								</div>
							</el-collapse-item>
						</el-collapse>

						<el-collapse>
							<el-collapse-item title="空域信息">
								<div class="collapse-content">
									<el-table :data="airspaceTableData" height="300" stripe style="width:100%" v-loading="loading" element-loading-text="数据加载中...">
										<el-table-column prop="airspaceName" label="空域名称" align="center"></el-table-column>
										<el-table-column prop="airspaceShape" label="空域形状 " align="center"></el-table-column>
										<el-table-column prop="pointsDFM" label="经纬度集合" align="center" min-width="150"></el-table-column>
									</el-table>
								</div>
							</el-collapse-item>
						</el-collapse>

						<el-collapse>
							<el-collapse-item title="航线信息">
								<div class="collapse-content">
									<el-table :data="airLineTableData" height="300" stripe style="width:100%" v-loading="loading" element-loading-text="数据加载中...">
										<el-table-column prop="airlineName" label="航线名称 " align="center" width="400"></el-table-column>
										<el-table-column prop="pointsDFM" label="航线点集 " align="center"></el-table-column>
									</el-table>
								</div>
							</el-collapse-item>
						</el-collapse>

						<el-collapse>
							<el-collapse-item title="航空器信息">
								<div class="collapse-content">
									<el-table :data="airCraftTableData" height="300" stripe style="width:100%" v-loading="loading" element-loading-text="数据加载中...">
										<el-table-column prop="aircraftNumber" label="航空器编号" align="center"></el-table-column>
										<el-table-column prop="aircraftType" label="航空器类型 " align="center"></el-table-column>
										<el-table-column prop="aircraftModel" label="机型" align="center"></el-table-column>
										<el-table-column prop="supervisingDevices" label="监视设备 " align="center" width="500"></el-table-column>
										<el-table-column label="操作" align="center">
											<template slot-scope="scope">
												<el-button type="text" @click="handleEdit(scope.row)" >修改</el-button>
											</template>
										</el-table-column>
									</el-table>
								</div>
							</el-collapse-item>
						</el-collapse>

						<el-collapse>
							<el-collapse-item title="机组人员信息">
								<div class="collapse-content">
									<el-table :data="airManInforData" height="300" stripe style="width:100%" v-loading="loading" element-loading-text="数据加载中...">
										<el-table-column prop="crewType" label="机组人员类型 " align="center"></el-table-column>
										<el-table-column prop="crewName" label="机组人员姓名 " align="center"></el-table-column>
										<el-table-column prop="crewIdcard" label="身份证" align="center"></el-table-column>
										<el-table-column prop="crewNationality" label="机组人员国籍 " align="center"></el-table-column>
										<el-table-column prop="crewContacts" label="机组联系人 " align="center"></el-table-column>
										<el-table-column prop="crewPhone" label="机组联系方式 " align="center"></el-table-column>
										<!-- <el-table-column prop="faxNum" label="传真号 " align="center"></el-table-column> -->
									</el-table>
								</div>
							</el-collapse-item>
						</el-collapse>
						  <!-- 对话框 -->
						<el-dialog :title="title[dialogType]" :visible.sync="dialogFormVisible" class="cns-manage lookManage" center @close="dialog_close">
								<el-form :model="userForm" :rules="rules" ref="ref_temp" class="clearfix">
									<el-form-item label="监视设备" prop="supervisingDevices">
										<el-input v-model="userForm.supervisingDevices"/>
									</el-form-item>
								</el-form>
								<div slot="footer" class="dialog-footer">
									<el-button @click="dialogFormVisible = false">取 消</el-button>
									<el-button v-if="dialogType === 'edit'" type="primary" @click="finishEdit">确 定</el-button>
								</div>
							</el-dialog>

					</div>
				</div>
			</div>
		</div>

		<script src="plugins/vue2.5.9.js"></script>
		<script src="plugins/axios.min.js"></script>
		<!--<script src="plugins/ele2.3.3.js"></script>-->
		<script src="plugins/element-ui.js"></script>
		<script src="plugins/httpVueLoader.js"></script>
		<script src="plugins/jquery.min.js"></script>
		<script src="plugins/leaflet.js"></script>
		<script src="plugins/iclient9-leaflet.min.js"></script>
		<script src="plugins/leaflet.draw.js"></script>
		<script src="plugins/leaflet.measurecontrol.min.js"></script>
		<script src="plugins/leaflet.rotatedMarker.js"></script>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				// mixins: [mixin_common],
				data: {
					queryParams: {
						id: '5e5fc836-95e5-4cbb-9832-b71bdf7c3109'
					},
					loading: false,
					tableData: [],
					flyPlanBasicInfor: {}, //飞行计划基本信息
					airspaceTableData: [], //查看空域
					airLineTableData: [], //查看航线
					airCraftTableData: [], //查看航空器信息
					airManInforData: [], //查看机组人员信息
					total: 0,
					dialogFormVisible: false,
					userForm: {
						id: '',
						supervisingDevices: ''
					},
					rules: {
						supervisingDevices: [
							{ required: true, message: '监视设备不能为空', trigger: 'blur'}
						]
					},
					title: {
						edit: '修改监视设备'
					},
					dialogType: '',
					// commonUrl: 'http://dkjs.op-fly.cn/system/', //公共部分url
					commonUrl: 'http://212.64.57.59:10006/', //公共部分url
					//commonUrl: 'http://127.0.0.1:10006/', //公共部分url
				},
				created: function() {
					this.queryParams.id = this.getQueryString('id');
					this.getData()
				},
				filters: {
					nullDefalut: function(val) {
						if(val == null || val == '') {
							return '无记录';
						} else {
							return val;
						}
					},
				},

				mounted: function() {

				},

				methods: {
					//获取url中的数据
					getQueryString: function(name) {
						var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
						var r = window.location.search.substr(1).match(reg);
						if(r != null) return unescape(r[2]);
						return null;
					},
					getData: function() {
						var self = this;
						var parms = self.queryParams;
						//飞行计划基本信息
						axios.post(self.commonUrl + 'fly/plan/selectDetail', parms).then(function(response) {
							if(response.status == 200) {
								self.flyPlanBasicInfor = response.data.flyPlan
							}
						}).catch(function(error) {
							console.log(error);
						});

						//空域信息
						var parmsData = {
							flyPlanId:self.queryParams.id
						}
						axios.post(self.commonUrl + 'fly/plan/selectAirspace', parmsData).then(function(response) {
							if(response.status == 200) {
								self.airspaceTableData = response.data.flyairspace
							}
						}).catch(function(error) {
							console.log(error);
						});

						//航线信息
						axios.post(self.commonUrl + 'fly/plan/selectAirLine', parmsData).then(function(response) {
							if(response.status == 200) {
								console.log(response)
								self.airLineTableData = response.data.flyairLine
							}
						}).catch(function(error) {
							console.log(error);
						});

						//航空器信息
						axios.post(self.commonUrl + 'fly/plan/selectAircraft', parmsData).then(function(response) {
							if(response.status == 200) {
								self.airCraftTableData = response.data.flyairCraft
							}
						}).catch(function(error) {
							console.log(error);
						});

						//机组人员信息
						axios.post(self.commonUrl + 'fly/plan/selectFlyCrew', parmsData).then(function(response) {
							if(response.status == 200) {
								self.airManInforData = response.data.flyCrew
							}
						}).catch(function(error) {
							console.log(error);
						});

						
					},
					// 修改
					handleEdit (row) {
						console.log(row)
						this.dialogFormVisible = true
						this.dialogType = 'edit'
						this.userForm = row
					},
					finishEdit () {
						var self = this;
						var monitorData = {
							aircraftId: self.userForm.id,
                            targenAddress: self.userForm.supervisingDevices
						}
						this.$refs.ref_temp.validate((valid) => {
							if (valid) {
								axios.post(self.commonUrl + 'fly/plan/updateTargetAddress', monitorData).then(function(response) {
									if(response.status == 200) {
										self.dialogFormVisible = false
										self.getData();
									}
								}).catch(function(error) {
									console.log(error);
								});
							} else {
								return false
							}
						})
					},
					dialog_close() {
						this.userForm= {
							id: '',
							supervisingDevices: ''
						},
						
						this.$refs.ref_temp.resetFields()
					},
				}
			});
		</script>

	</body>

</html>